<template>
  <div class="home">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="wap-nav" size="30px" color="#fff" @click="iconShow" />
      </template>
    </van-nav-bar>
    <!-- 右上跳转框 -->
    <div class="squBox" v-show="iconFlag">
      <p @click="goDetial">榜单</p>
      <p>热点</p>
    </div>

    <router-view></router-view>

    <van-tabbar active-color="#e54847" inactive-color="#696969">
      <van-tabbar-item icon="home-o" to="/home">
        <template #icon>
          <div class="iconfont icon-dianying" style="font-size: 20px"></div>
        </template>
        电影/影院
      </van-tabbar-item>
      <van-tabbar-item icon="search" to="/video">
        <template #icon>
          <div
            class="iconfont icon-dianshizhiboguankanshipinbofangmeiti"
            style="font-size: 20px"
          ></div>
        </template>
        视频
      </van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/smallvideo">
        <template #icon>
          <div class="iconfont icon-shipin" style="font-size: 20px"></div>
        </template>
        小视频
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/show">
        <template #icon>
          <div class="iconfont icon-menpiao" style="font-size: 20px"></div>
        </template>
        演出
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/mine">
        <template #icon>
          <div
            class="iconfont icon-dibutubiao_wode"
            style="font-size: 20px"
          ></div>
        </template>
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data: () => ({
    title: localStorage.getItem('title') || '猫眼电影',
    active: Number(localStorage.active) || 0,
    iconFlag: false
  }),
  methods: {
    onClickLeft() {
      // 返回上一页
      this.$router.go(-1)
    },
    iconShow() {
      this.iconFlag = !this.iconFlag
    },
    goDetial() {
      // this.$router.push('/home/gethotmovie')
      // this.iconFlag = !this.iconFlag
    }
  },
  watch: {
    '$route.path'() {
      this.title = this.$route.meta.title
      this.active = this.$route.meta.active
      localStorage.title = this.$route.meta.title
      localStorage.active = this.$route.meta.active
    }
  },
  created() {
    console.log(this.$route.meta)
  }
}
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.home {
  position: relative;
  .van-icon-arrow-left::before {
    color: #fff;
    font-size: 18px;
  }
  .van-nav-bar__content {
    background: #e54847;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .squBox {
    width: 110px;
    position: absolute;
    top: 48px;
    right: 0px;
    line-height: 46px;
    text-align: center;
    border: 1px solid #ccc;
    z-index: 100;
    p {
      border-top: 1px solid #ccc;
      height: 46px;
      background: #fff;
    }
  }
  .van-hairline--top-bottom {
    border-top: 1px solid #ccc;
  }
}
</style>